/**
 * 命令式组件  审核
 * @param {number} id
 * @param {String} remark
 * @param {number} statusId
 */
import { createApp, ref, reactive } from "vue"; // createElementVNode
import { ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from "element-plus"; // ElButton
import { Dict } from "@/api/interface/index";
import { auditContent } from "@/api/modules/sys";
interface optionsParams {
  id: string;
  remark: string;
  typeId: string;
  list: Dict.ResDictList[];
  flag: String;
  getTableList: (data: any) => void;
}
const reviewHandle = async function (params: optionsParams) {
  let isShow = ref(false);
  let div = document.createElement("div");
  let body = document.querySelector("body");
  const rules = reactive({
    typeId: [{ required: true, message: "请选择状态" }],
    remark: [{ required: true, message: "请填写审核意见" }]
  });
  body?.append(div);
  const options = {
    name: "review",
    props: {
      remark: String,
      typeId: String
    },
    render: ctx => {
      // 处理当前值是否存在
      params.typeId = params.list && params.list.filter(item => item.id).includes(params.typeId) ? params.typeId : "";
      const drawerProps = ref({
        id: params.id,
        remark: params.remark,
        list: params.list,
        typeId: params.typeId,
        flag: params.flag
      });
      const cancelHandle = () => {
        ctx.$emit("cancel");
      };
      const commitHandle = () => {
        ctx.$refs.ruleFormRef.validate(async valid => {
          console.log(valid);
          if (!valid) return;
          ctx.$emit("commit", drawerProps.value);
        });
      };

      return (
        <ElDialog model-value={isShow} title="审核" style="width:30vw">
          <ElForm label-width="100px" model={drawerProps.value} rules={rules} ref="ruleFormRef">
            <ElFormItem label="状态" prop="typeId">
              <ElSelect v-model={drawerProps.value.typeId} placeholder="请选择状态" clearable>
                {drawerProps.value.list.map(item => (
                  <ElOption key={item.id} label={item.name} value={item.id} />
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="审核意见" prop="remark">
              <ElInput v-model={drawerProps.value.remark} placeholder="请填写审核意见" clearable></ElInput>
            </ElFormItem>
          </ElForm>
          <div style="display:flex;justify-content:flex-end; width: 100%;margin-top: 20px">
            <ElButton onClick={cancelHandle}> 取消 </ElButton>
            <ElButton type="primary" onClick={commitHandle}>
              确定
            </ElButton>
          </div>
        </ElDialog>
      );
    }
  };
  let app = createApp(options, {
    isShow,
    id: params.id,
    remark: params.remark,
    typeId: params.typeId,
    list: params.list,
    flag: params.flag,
    onClose() {
      isShow.value = false;
      app.unmount();
      div.remove();
    },
    onOpen() {
      isShow.value = true;
    },
    onCancel() {
      isShow.value = false;
      app.unmount();
      div.remove();
    },
    async onCommit(data) {
      await auditContent({
        auditMessage: data.remark,
        id: data.id,
        parameterId: data.flag,
        status: data.typeId
      });
      isShow.value = false;
      app.unmount();
      div.remove();
      params.getTableList();
    }
  });
  app.mount(div);
};

export default reviewHandle;
